<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js练习</title>
    <style>
        header>form>span{
            font-size: 10px;
            color: dodgerblue;
        }
        header{
            border: 1px solid darkblue;
            height: 80px;
            width: 120px;
        }
        /*下拉框练习*/
        aside>img{
            width: 145px;height: 190px;
        }
        aside>select{
            width: 60px;
            font-size: 15px;
        }
        aside>select>option{
            background-color: #1d86b9;
        }
        article>div{
            border: 1px solid red;
            width: 200px;
        }
        .grade{
            font-size: 20px;
            color: #1d86b9;
            text-align: center;
            background-color: #4dc827;
            line-height: 40px;
        }
        .grade:hover{
            color: #d98736;
        }
        .head{
            height: 90px;
            text-align: center;
            background-color: #b3d4fc;
            line-height: 90px;
        }
        .people{
            text-align: center;
            line-height: 30px;
            display: none;
        }
        article>div:nth-child(2){
            display: block;
        }
    </style>
    <script>
        function servlet(){
            var spanObj= document.getElementById("span");
            spanObj.innerHTML="你还没有男朋友";
        }
        function selectStar(starObj){
            var showObj=document.getElementById("star");
            showObj.src=starObj;
        }
        var array;
        window.onload=function (){
            array=document.getElementsByTagName("div");
        }
        function showBody(divObj){
            var showObj=document.getElementById(divObj);
            for (var i=0;i<array.length;i++){
                if (array[i].style.display==="block"){
                    array[i].style.display="none";
                }
            }
            showObj.style.display="block";
        }
    </script>
</head>
<body>
    <header>
        <form action="smallGame">
            <input type="button" value="两个黄鹂鸣翠柳" onclick="servlet()">
            <br>   <span id="span"></span>
        </form>
    </header>
    <aside>
        <img src="D:\JAVA\程序\WEB\image\yy.JPG" alt="模特" id="star">
        <select name="showImage" id="name" onchange="selectStar(this.value)">
            <option value="D:\JAVA\程序\WEB\image\yy.JPG">--</option>
            <option value="img/yihan2.jpg">伊涵</option>
            <option value="img/jiaxin1.jpg">嘉欣</option>
            <option value="img/yuwen2.jpg">于雯</option>
            <option value="img/yihan4.jpg">妹纸</option>
        </select>
    </aside>

    <article>
        <div class="grade"  onclick="showBody('welcome')">WELCOME</div>
        <div class="people" id="welcome">欢迎进入图书馆</div>
        <div class="grade" onclick="showBody('college')">大学</div>
        <div class="people" id="college">
            阳家涛 <br>
            张雄 <br>
            陈前
        </div>
        <div class="grade" onclick="showBody('middle')">高中</div>
        <div class="people" id="middle">
            段之秀 <br>
            王刚 <br>
            陈智越
        </div>
        <div class="grade" onclick="showBody('primary')">初中</div>
        <div class="people" id="primary">
            李梅 <br>
            冉浩元 <br>
            罗红
        </div>
    </article>
</body>
</html>